<template>
    <div
        style="display: flex;flex-direction: column;height: 100%;width: 100%;background-color: white;border-radius: 10px;align-items: center;">
        <div
            style="display: flex;flex-direction: column;background-color: #F6F7FB;border-radius: 10px;width: 99%;margin: 20px 0;">
            <div style="width: 100%;display: flex;">
                <div style="flex: 1;">
                    <div style="display: flex;align-items: center;margin: 10px;">文字背景颜色
                        <el-color-picker v-model="fontBackColor" show-alpha style="margin: 0 10px;"
                            @input="changeInput"></el-color-picker>
                        <el-input style="width: 200px;" v-model="fontBackColor" @input="changeInput"></el-input>
                    </div>
                    <div style="display: flex;align-items: center;margin: 10px;">背景边框颜色
                        <el-color-picker v-model="backBorderColor" show-alpha style="margin: 0 10px;"
                            @input="changeInput"></el-color-picker>
                        <el-input style="width: 200px;" v-model="backBorderColor" @input="changeInput"></el-input>
                    </div>

                </div>
                <div style="flex: 1;">
                    <div style="display: flex;align-items: center;margin: 10px;">
                        <div style="width:50px;text-align: left;">透明度</div>
                        
                        <el-input style="width: 200px;margin:0 10px;" v-model="transparency"
                            @input="changeInput"></el-input>%
                    </div>
                    <div style="display: flex;align-items: center;margin: 10px;">
                        <div style="width: 50px;text-align: left;">
                            线宽
                        </div>
                        
                        <el-input style="width: 200px;margin:0 10px;" v-model="borderWidth"
                            @input="changeInput"></el-input>px
                    </div>
                </div>
            </div>
            <div style="width: 100%;display: flex;flex-direction: column;">
                <div style="display: flex;margin: 0 10px;"> 边框背景
                    <el-tooltip content="加载图片背景的情况下，上面的设置无效，图片背景分辨率宽度为当前显示屏宽度，高度需要根据文字部分设置的比例计算，计算方式为显示器高度乘以比例。"
                        placement="right" effect="light">
                        <el-button
                            style="margin-left: 10px;background-color:#7082D7;color:white ;width: 20px; height: 20px;display: flex;justify-content: center;align-items: center;"
                            circle>?</el-button>
                    </el-tooltip>
                </div>
                <div style="display: flex;width: 100%;margin: 0 10px;align-items: end;">
                    <el-upload style="margin: 10px 0;" class="avatar-uploader" :action="baseURL + '/api/file/upload/'"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        @input="changeInput">
                        <img :src="imageUrl" class="avatar">
                    </el-upload>
                    <el-button icon="el-icon-delete-solid" type="danger"
                        style="height: 20px;display: flex;align-items: center;margin: 15px;"></el-button>
                </div>
            </div>
        </div>
        <div
            style="display: flex;flex-direction: column;background-color: #F6F7FB;border-radius: 10px;width: 99%;margin: 20px 0;">
            <div style="display: flex;margin:10px;align-items: center;">
                <div style="width: 100px;">
                    边框显示样式
                </div>

                <el-select v-model="borderDisplayStyle" placeholder="请选择" style="margin: 0 10px;" @input="changeInput">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="display: flex;margin: 0 10px;align-items: center;">
                <div style="display: flex;"> 加载边框样式
                    <el-tooltip content="自定义边框建议使用500*500大小的png带透明图层的图片。" placement="bottom" effect="light">
                        <el-button
                            style="margin-left: 10px;background-color:#7082D7;color:white ;width: 20px; height: 20px;display: flex;justify-content: center;align-items: center;"
                            circle>?</el-button>
                    </el-tooltip>
                </div>
                <el-upload class="upload-demo" :action="baseURL + '/api/file/upload/'" :on-preview="handlePreview"
                    style="display: flex;align-items: center;margin: 10px;" :on-remove="handleRemove"
                    :on-success="handleAvatarSuccessOfLoadingBorderStyle" :before-remove="beforeRemove" multiple :limit="1"
                    :on-exceed="handleExceed" :file-list="fileList">
                    <el-button size="small" type="primary">选择文件</el-button>
                </el-upload>
            </div>

        </div>
        <div
            style="display: flex;flex-direction: column;background-color: #F6F7FB;border-radius: 10px;width: 99%;margin: 20px 0;">
            <div style="display: flex;margin:10px;align-items: center;width: 400px;">
                <div style="width: 100px;display: flex;justify-content: flex-start;">
                    背景样式
                </div>

                <el-select v-model="backgroundStyle" placeholder="请选择" style="margin: 0 10px;" @input="changeInput">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="display: flex;margin: 0 10px;align-items: center;">
                <div style="display: flex;"> 背景图片
                    <el-tooltip content="加载图片背景的情况下，背景样式无效，图片背景分辨率宽度为显示屏宽度，高度为显示器高度。文字占比的部分会被遮挡。" placement="bottom"
                        effect="light">
                        <el-button
                            style="margin-left: 10px;background-color:#7082D7;color:white ;width: 20px; height: 20px;display: flex;justify-content: center;align-items: center;"
                            circle>?</el-button>
                    </el-tooltip>
                </div>
            </div>
            <div style="display: flex;width: 100%;margin: 0 10px;align-items: end;">
                <el-upload style="margin: 10px 0;" class="avatar-uploader" :action="baseURL + '/api/file/upload/'"
                    :show-file-list="false" :on-success="handleAvatarSuccessInAddBackground"
                    :before-upload="beforeAvatarUploadInAddBackground">
                    <img :src="addBackgroundImageUrl" class="avatar">
                </el-upload>
                <el-button icon="el-icon-delete-solid" type="danger"
                    style="height: 20px;display: flex;align-items: center;margin: 15px;"></el-button>
            </div>
        </div>
    </div>
</template>

<script>
import elementUtils from "element-resize-detector/src/element-utils";
import request from "../axios/request";
export default {
    data() {
        return {
            fontBackColor: 'rgba(19, 206, 102, 0.8)',
            backBorderColor: 'rgba(19, 206, 102, 0.8)',
            borderWidth: null,
            baseURL: null,
            imageUrl: null,
            options: [{
                value: '科幻蓝',
                label: '科幻蓝'
            }, {
                value: '科幻绿',
                label: '科幻绿'
            }, {
                value: '科幻紫',
                label: '科幻紫'
            }, {
                value: '古风黄',
                label: '古风黄'
            }],
            borderDisplayStyle: '',
            backgroundStyle: null,
            addBackgroundImageUrl: null,
            loadingBorderStyle: null,
            transparency:null,
            fileList: []
        };
    },
    methods: {
        async changeInput() {
            let resOfUpdateDisplayInfo=await request({
                url: "/api/display/updateDisplayInfo",
                method: "POST",
                data: {
                    id: this.displayId,
                    fontBackColor: this.fontBackColor,
                    backBorderColor: this.backBorderColor,
                    borderBackground: this.imageUrl,
                    borderWidth: this.borderWidth,
                    borderDisplayStyle: this.borderDisplayStyle,
                    backgroundStyle: this.backgroundStyle,
                    backgroundImageUrl: this.addBackgroundImageUrl
                }
            });
            if (resOfUpdateDisplayInfo.data.status == 200) {
                this.getDislpayInfo()
            }
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = res.data;
            this.changeInput()
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleAvatarSuccessInAddBackground(res, file) {
            this.addBackgroundImageUrl = res.data;
            this.changeInput()
        },
        beforeAvatarUploadInAddBackground(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleAvatarSuccessOfLoadingBorderStyle(res) {
            this.loadingBorderStyle = res.data
            // console.log(res.data);
            console.log("上传成功");
            console.log(this.fileList);
        },
        async getDislpayInfo() {
            let resOfGettingDisplayInfo = await request({
                url: "/api/display/getDisplayInfo",
                method: "GET"
            });
            if (resOfGettingDisplayInfo.data.data != null) {
                this.displayId = resOfGettingDisplayInfo.data.data.id
                this.fontBackColor = resOfGettingDisplayInfo.data.data.fontBackColor
                this.backBorderColor = resOfGettingDisplayInfo.data.data.backBorderColor
                this.imageUrl = resOfGettingDisplayInfo.data.data.borderBackground
                this.borderWidth = resOfGettingDisplayInfo.data.data.borderWidth
                this.borderDisplayStyle = resOfGettingDisplayInfo.data.data.borderDisplayStyle
                this.backgroundStyle = resOfGettingDisplayInfo.data.data.backgroundStyle
                this.addBackgroundImageUrl = resOfGettingDisplayInfo.data.data.backgroundImageUrl
            }
        }
    },
    mounted() {
        this.baseURL = request.defaults.baseURL;
        this.getDislpayInfo()
    },
    components: { elementUtils }
}
</script>

<style >
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: white;
    width: 300px;
    height: 200px;
    background: url("../assets/OIP-C.png") center center;
    background-size: contain;
    box-shadow: 0 10px 5px 0 rgba(237, 239, 241, 0.35);
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar {
    width: 300px;
    height: 200px;
    display: block;
}
</style>